  // 1.获取元素
  var bannerEl = document.querySelector(".banner");
  var titleListEl = document.querySelector(".title-list");
  var activeItemEl = document.querySelector(".active");
  var imageList = document.querySelector(".image-list");

  // 定义一些变量保存状态
  var currentIndex = 0;
  var timerId = null;

  // 2.监听事件
  titleListEl.onmouseover = function (event) {
    var itemEl = event.target.parentElement;
    if (!itemEl.classList.contains("item")) return;

    // 获取当前itemEl所在的索引
    for (var i = 0; i < titleListEl.children.length; i++) {
      if (itemEl === titleListEl.children[i]) break;
    }
    // 将当前索引保存起来
    currentIndex = i;

    switchBanner();
  };

  // 3.添加定时器自动轮播
  startTimer();

  // 鼠标进入清除定时器
  bannerEl.onmouseenter = function () {
    clearInterval(timerId);
  };

  // 鼠标离开添加定时器
  bannerEl.onmouseleave = function () {
    startTimer();
  };

  // 由于定时器和监听事件中有大量相似代码 我们可以抽离成一个函数
  // 4.封装一个切换轮播的函数
  function switchBanner() {
    // 处理active
    // 1.1删除之前的active
    activeItemEl.classList.remove("active");
    // 1.2添加新的active
    var currentItemEl = titleListEl.children[currentIndex];
    currentItemEl.classList.add("active");
    // 1.3记录新的active
    activeItemEl = currentItemEl;

    // 1.4处理图片轮播
    imageList.style.transform = `translateX(${-604 * currentIndex}px)`;
    imageList.style.transition = `all 300ms ease`;
  }

  // 5.封装一个添加定时器函数
  function startTimer() {
    timerId = setInterval(function () {
      currentIndex++;
      if (currentIndex === titleListEl.children.length) currentIndex = 0;

      switchBanner();
    }, 3000);
  }